<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
</head>
<body>
<h1>hello world</h1>
<div id="queryById">
    <form id="studentForm">
        <input type="text" name="studentId" placeholder="请输入学生学号"/>
        <button type="button" name="queryById">查询学生</button>
    </form>
    <div id="studentInfo"></div>
</div>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        document.getElementById("queryButton").addEventListener("click", function() {
            var studentId = document.getElementById("studentId").value;
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "/" + studentId, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    var studentInfoDiv = document.getElementById("studentInfo");
                    if (xhr.status === 200) {
                        studentInfoDiv.innerHTML = "<pre>" + JSON.stringify(JSON.parse(xhr.responseText), null, 2) + "</pre>";
                    } else {
                        studentInfoDiv.innerHTML = "Error: 学生信息查询失败";
                    }
                }
            };
            xhr.send();
        });
    });
</script>
</body>
<!--<script type="text/javascript" src="static/jquery-1.12.4.min.js"></script>-->
<!--<script type="text/javascript" src="static/jquery.serializeObject.js"></script>-->
<script>
    // $("#queryById").click(function (){
    //     console.log("点击了查询按钮");
    //     var studentForm = $("#studentForm").serializeObject();
    //     $.get("/"+studentForm.studentId,function (res){
    //         $("studentInfo").html(res);
    //     });
    // });

    // $(document).ready(function(){
    //     $("#queryById").click(function (){
    //         console.log("点击了查询按钮")
    //         var studentForm = $("#studentForm").serializeObject();
    //         $.get("/" + studentForm.studentId, function (res){
    //             $("#studentInfo").html(res);
    //         }).fail(function() {
    //             $("#studentInfo").html("Error: 学生信息查询失败");
    //         });
    //     });
    // });

    // $("#queryButton").click(function (){
    //     var studentId = $("#studentId").val();
    //     $.ajax({
    //         url: "/" + studentId,
    //         method: "GET",
    //         success: function(res) {
    //             $("#studentInfo").html("<pre>" + JSON.stringify(res, null, 2) + "</pre>");
    //         },
    //         error: function() {
    //             $("#studentInfo").html("Error: 学生信息查询失败");
    //         }
    //     });
    // });


</script>
</html>